<template>
    <div :visible="visible" :close-on-press-escape="false" :close-on-click-modal="false" append-to-body
                 @close="handleClose"  :fullscreen="fullscreen" style="margin-top: 30px;">
          <div class="dialog-title ellipsis">
              {{ name }}
            <!-- <div class="full-screen__menu" @click="fullscreen? fullscreen=false: fullscreen=true">
              <i class="el-icon-full-screen"></i>
            </div> -->
        </div>
        <div>
          <!-- pdf预览 -->
          <div v-if="fileType===1">
            <div v-if="pdfData.pageCount>1">
              <el-button type="primary" size="mini" @click="changePdfPage(0)" icon="el-icon-arrow-left"></el-button>
              <span style="font-size: 14px;font-weight: 550;margin: 0 10px">{{ pdfData.currentPage }} / {{
                  pdfData.pageCount
                }}</span>
              <el-button type="primary" size="mini" @click="changePdfPage(1)" icon="el-icon-arrow-right"></el-button>
            </div>
            <div
              :style="{height:fullscreen?(clientHeight-200)+'px':(clientHeight-400>800?800:clientHeight-400)+'px'}"
              style="margin-top: 5px;border: 1px solid #a0a0a0;overflow:auto;">
              <pdf
                :src="pdfData.src"
                :page="pdfData.currentPage"
                @num-pages="pdfData.pageCount=$event"
                @page-loaded="pdfData.currentPage=$event"
              ></pdf>
            </div>
          </div>
          <!-- word文档预览 -->
          <div v-if="fileType===2">
            <div
              :style="{height:fullscreen?(clientHeight-200)+'px':(clientHeight-400>800?800:clientHeight-400)+'px'}"
              style="margin-top: 5px;border: 1px solid #a0a0a0;overflow: auto">
              <div v-html="docHtml" style="padding: 10px 15px"></div>
            </div>
          </div>
          <!-- Excel文档预览 -->
          <div v-if="fileType===3">
            <div class="tab">
              <el-radio-group size="small" v-model="excel.sheetNameActive" @change="getSheetNameTable">
                <el-radio-button v-for="(item,index) in excel.sheetNames" :key="index" :label="item"></el-radio-button>
              </el-radio-group>
            </div>
            <div
              :style="{height:fullscreen?(clientHeight-200)+'px':(clientHeight-400>800?800:clientHeight-400)+'px'}"
              style="margin-top: 5px;border: 1px solid #a0a0a0;overflow:auto;">
              <!-- <div v-html="excel.SheetActiveTable" style="padding: 10px 15px"></div> -->
            <iframe :src="'https://view.officeapps.live.com/op/view.aspx?src='+baseURL+file.url"  style="width: 100%;height: 100vh;"></iframe>
            </div>
          </div>
          <div v-if="!fileType" style="line-height: 50px;text-align: center;font-size: 16px">
            文件格式不支持，仅支持pdf,docx,xlsx,xls文件预览
          </div>
        </div>
        <div style="text-align: right;margin-top: 5px">
          <!-- <el-button size="small" @click="handleClose" class="raise">关闭</el-button> -->
        </div>
    </div>
  </template>
  
  <script>
  // import XLSX from "xlsx"
  import pdf from "vue-pdf"
  import mammoth from 'mammoth'
  
  export default {
    name: "officePreview",
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      // file:{name:'',url:''}
      file: {
        type: Object,
        default: () => {
          return {}
        }
      },
      // 弹窗高度
      clientHeight: {
        type: Number,
        default: 600
      },
      // 基础链接
      baseURL: {
        type: String,
        default: undefined
      }
    },
    data() {
      return {
        // 全屏
        fullscreen: false,
        // 文件类型
        fileType: 1,
        // pdf数据
        pdfData: {
          // 当前页
          currentPage: 1,
          // pdf文件总页数
          pageCount: 0,
          //
          src: ""
        },
        docHtml: "",
        // 空文件提示信息
        emptyTips: '暂无内容',
        // Excel文档数据
        excel: {
          // 数据
          workbook: {},
          // 表名称集合
          sheetNames: [],
          // 激活项
          sheetNameActive: "",
          // 当前激活表格
          SheetActiveTable: "",
          //文件名字
          name:''
        }
      }
    },
    methods: {
      handleClose() {
        this.$emit("update:visible", false)
      },
      /**
       * 切换pdf显示页
       * @param command
       */
      changePdfPage(command) {
        if (command === 0) {
          if (this.pdfData.currentPage > 1) {
            this.pdfData.currentPage--
          }
        } else if (command === 1) {
          if (this.pdfData.currentPage < this.pdfData.pageCount) {
            this.pdfData.currentPage++
          }
        }
      },
      /**
       * 获取文件类型
       * @return {null|number}
       */
      getFileType() {
        if (!this.file) {
          return null
        }
        let fileName = this.file.name.lastIndexOf(".");//取到文件名开始到最后一个点的长度
        let fileNameLength = this.file.name.length;//取到文件名长度
        let fileFormat = this.file.name.substring(fileName + 1, fileNameLength);//截
        this.name=this.file.name.substring(0,fileName)
        if (fileFormat.toLowerCase() === "pdf") {
          return 1
        } else if (fileFormat.toLowerCase() === "docx") {
          return 2
        } else if (fileFormat.toLowerCase() === "xlsx" || fileFormat.toLowerCase() === "xls") {
          return 3
        }
        return null
      },
      /**
       * pdf预览
       */
      initPdf() {
        // this.pdfData.src = pdf.createLoadingTask(this.$baseURL + this.file.url)
        try {
          // 加载
          let _this = this
          const xhr = new XMLHttpRequest();
          xhr.open('get', this.baseURL + this.file.url, true);
          xhr.responseType = 'blob';
          xhr.onload = function () {
            if (xhr.status === 200) {
              _this.pdfData.src = _this.getObjectURL(xhr.response)
            } else if (xhr.status === 404) {
              _this.$error({message: "文件不存在"})
            } else {
              _this.$error({message: "读取服务器文档异常"})
            }
          }
          xhr.onerror = function () {
            _this.$error({message: "访问服务器异常，请检查访问链接是否正常"})
          }
          xhr.send();
        } catch (e) {
          console.log(e)
        }
      },
      /**
       * 将返回的流数据转换为url
       * @param file 文件流
       */
      getObjectURL(file) {
        let url = null;
        if (window.createObjectURL !== undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.webkitURL !== undefined) { // webkit or chrome
          try {
            url = window.webkitURL.createObjectURL(file);
          } catch (error) {
  
          }
        } else if (window.URL !== undefined) { // mozilla(firefox)
          try {
            url = window.URL.createObjectURL(file);
          } catch (error) {
            console.log(error)
          }
        }
        return url;
      },
      /**
       * docx文件预览
       */
      initDocPreview() {
        // 请求文件流
        try {
          let _this = this
          const xhr = new XMLHttpRequest();
          xhr.open('get', this.baseURL + this.file.url, true);
          xhr.responseType = 'arraybuffer';
          xhr.onload = function () {
            if (xhr.status === 200) {
              mammoth.convertToHtml({arrayBuffer: new Uint8Array(xhr.response)}).then(function (resultObject) {
                _this.docHtml = resultObject.value
              })
            } else if (xhr.status === 404) {
              _this.$error({message: "文件不存在"})
            } else {
              _this.$error({message: "读取服务器文档异常"})
            }
          }
          xhr.onerror = function () {
            _this.$error({message: "访问服务器异常，请检查访问链接是否正常"})
          }
          xhr.send();
        } catch (e) {
          this.docHtml = '<h1 style="text-align: center">' + this.emptyTips + '</h1>'
        }
      },
      /**
       * 表格数据预览
       */
      initExcelPreview() {
        try {
          let xhr = new XMLHttpRequest()
          xhr.open('get', this.baseURL + this.file.url, true)
          xhr.responseType = 'arraybuffer'
          const _this = this
          xhr.onload = function (e) {
            if (xhr.status === 200) {
              const data = new Uint8Array(xhr.response)
              const workbook = XLSX.read(data, {type: 'array'})
              const sheetNames = workbook.SheetNames // 工作表名称集合
              _this.excel.workbook = workbook
              _this.excel.sheetNames = sheetNames
              _this.excel.sheetNameActive = sheetNames[0]
              _this.getSheetNameTable(sheetNames[0])
            } else if (xhr.status === 404) {
              _this.$error({message: "文件不存在"})
            } else {
              _this.$error({message: "读取服务器文档异常"})
            }
          }
          xhr.onerror = function () {
            _this.$error({message: "访问服务器异常，请检查访问链接是否正常"})
          }
          xhr.send()
        } catch (e) {
          console.log(e)
        }
  
      },
      /**
       * 根据工作表名称获取数据
       * @param sheetName
       */
      getSheetNameTable(sheetName) {
        try {
          // 获取当前工作表的数据
          const worksheet = this.excel.workbook.Sheets[sheetName]
          // 转换为数据  1.json数据有些问题，2.如果是html那么样式需修改
          let htmlData = XLSX.utils.sheet_to_html(worksheet, {header: '', footer: ''})
          htmlData = htmlData === '' ? htmlData : htmlData.replace(/<table/, '<table class="default-table" border="1px solid #ccc" cellpadding="0" cellspacing="0"')
          // 第一行进行改颜色
          htmlData = htmlData === '' ? htmlData : htmlData.replace(/<tr/, '<tr style="background:#b4c9e8"')
          this.excel.SheetActiveTable = htmlData
        } catch (e) {
          // 如果工作表没有数据则到这里来处理
          this.excel.SheetActiveTable = '<h4 style="text-align: center">' + this.emptyTips + '</h4>'
        }
      },
    },
    created() {
      this.fileType = this.getFileType()
      if (this.fileType === 1) {
        this.initPdf()
      }
      if (this.fileType === 2) {
        this.initDocPreview()
      }
      if (this.fileType === 3) {
        // this.initExcelPreview()
        this.showExcel=true
      }
    },
    components: {
      pdf
    }
  }
  </script>
  
  <style scoped>
  .dialog-title {
    text-align: center;
    display: flex;
    font-size: 25px;
    justify-content: center;
 
  }
  
  .full-screen__menu {
    font-size: 16px;
    display: inline;
  }
  
  .full-screen__menu:hover {
    font-size: 16px;
    color: #2D8CF0;
  }
  </style>
  <style>
  
  table.default-table {
    /* -moz-border-radius: 5px;
    -webkit-border-radius:5px;
    border-radius:5px; */
    width: 100%;
    border: solid #333;
    border-width: 1px 0px 0px 1px;
    font-size: 16px;
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  table.default-table tbody tr {
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
  }
  
  table.default-table tbody tr:hover {
    background-color: #eee;
  }
  
  table.default-table tbody tr th, table.default-table tbody tr td {
    padding: 3px 5px;
    text-align: left;
    /* border: 1px solid #ddd; */
    border: solid #333;
    border-width: 0px 1px 1px 0px;
    white-space: nowrap;
  }
  
  table.default-table tbody tr th {
    font-weight: bold;
    text-align: center;
  }
  
  table.default-table tbody tr td a:hover {
    color: #0080c0;
  }
  </style>
  
  